<template>
	<div class="top-sale-item">
		<router-link class="top-sale-bg" :to="{path:'/goods/detail',query:{gdsId:goods.gdsId}}">
			<van-image :src="goods.gdsImg" lazy-load/>
			<div class="top-sale-main">
				<div class="title van-multi-ellipsis--l2">{{goods.gdsName}}</div>

				<div class="other-bottom">
					<div class="price" v-if="goods.agentPrice">￥<b>{{fen2Yuan(goods.agentPrice as number)}}</b></div>
					<div class="price" v-else>￥<b>{{fen2Yuan(goods.guidePrice as number)}}</b></div>
					<div class="sale-amount">销量{{thousandDivisor(goods.saleAmount)}}</div>
				</div>
				<div class="bookmark"><i class="iconfont">&#xe600;</i><div class="num">{{index}}</div></div>
			</div>
		</router-link>
	</div>
</template>
<style lang="scss" scoped>
.top-sale-item{
	padding:0 5px 5px 0;width:50%;
	.top-sale-bg{
		width:100%;background-color:var(--white-color);border-radius: 8px; overflow:hidden;
		position:relative;display:flex; align-items: stretch; font-size:12px;
		.van-image{
			width:40%; padding:5px; aspect-ratio: 1; border-radius:4px;overflow:hidden;
			:deep(.van-image__img){border-radius:4px;overflow:hidden; aspect-ratio: 1}
		}
		.top-sale-main{
			width:60%;padding:8px 8px 8px 0;
			display:flex;flex-direction: column; justify-content: space-between;
			.title{height:28px;line-height:14px;color:var(--font-first-color)}
			.sale-amount{color:var(--font-third-color);transform: scale(.9);transform-origin:100% center;}
			.price{
				color:var(--van-unicom-color);height:14px;line-height:14px;
				b{font-size:13px;}
			}
			.other-bottom{
				display:flex; align-items: baseline; justify-content: space-between;
			}
		}
		.bookmark{
			position:absolute;top:0;left:8px;height:24px; width:24px;
			.iconfont{
				color:var(--van-warning-color);font-size:24px;height:24px;width:100%;line-height:24px;
				display:block;
				transform: scale(1.2, 1);
			}
			.num{
				font-size:14px;position:absolute;left:0;top:0;width:100%;height:90%;
				display:flex;align-items:center;justify-content: center;color:var(--white-color);
			}
		}
	}
}
</style>
<script lang="ts" setup>
import {fen2Yuan,thousandDivisor} from "@/utils/validate";

const props = defineProps<{
	goods:TopSaleItem,
	index:number,
}>()
const domain = import.meta.env.VITE_DOMAIN
</script>